import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Radio, Select, Row, Col, DatePicker } from 'antd';
import React from 'react';
import { useRequest } from '@umijs/hooks';
import moment from 'moment';

import { queryCityInfo } from '../../service.js';

const FormItem = Form.Item;
const { TextArea } = Input;

const CreateForm = props => {
  const { formData, type, formModalVisible, form, onSubmit, onCancel } = props;

  const { data: selectData } = useRequest(queryCityInfo, { loadingDelay: true }); //获取出发和到达航站


  const okHandle = () => {

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      let effectTime = fieldsValue.effectTime ? moment(fieldsValue.effectTime).format('YYYY-MM-DD HH:mm:ss') : ''
      let obj = {...fieldsValue, effectTime: effectTime}
        if (type ==='edit') {
          obj = {...obj, id: formData.id}
        }
      onSubmit(obj);
    });
  };

  const leftFormLayout = {
    labelCol:{ span: 9 },
    wrapperCol: {span: 14}
  }
  const rightFormLayout = {
    labelCol:{ span: 12 },
    wrapperCol: {span: 11}
  }
  return (
    <Modal
      width={700}
      destroyOnClose={true}
      title={type === 'add' ? '新建' : '编辑'}
      visible={formModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Row>
        <Col span={10}>
          <FormItem label="始发站" {...leftFormLayout}>
            {form.getFieldDecorator('orgPlace', {
              rules: [
                {
                  required: true,
                  message: '请选择始发站！',
                },
              ],
              initialValue: formData && formData.orgPlace
            })(
              <Select
                style={{ width: 120 }}
                allowClear={true}
                showSearch
                placeholder="请选择"
                defaultActiveFirstOption={false}
                filterOption={true}
                optionFilterProp="children"
                notFoundContent={null}
              >
                {selectData && selectData.length > 0 &&
                  selectData.map((v, i) => {
                    return (
                      <Select.Option key={v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Select.Option>
                    )
                  })
                }
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={14}>
          <FormItem label="到达站" labelCol={{span: 9}} wrapperCol={{span: 8}}>
            {form.getFieldDecorator('dstPlace', {
              rules: [
                {
                  required: true,
                  message: '请选择到达站！',
                },
              ],
              initialValue: formData && formData.dstPlace
            })(
              <Select
                style={{ width: 120 }}
                allowClear={true}
                showSearch
                placeholder="请选择"
                defaultActiveFirstOption={false}
                filterOption={true}
                optionFilterProp="children"
                notFoundContent={null}
              >
                {selectData && selectData.length > 0 &&
                  selectData.map((v, i) => {
                    return (
                      <Select.Option key={v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Select.Option>
                    )
                  })
                }
              </Select>
            )}
          </FormItem>
        </Col>
      </Row>

      <Row>
        <Col span={10}>
          <FormItem label="当前价格(元)" {...leftFormLayout}>
            {form.getFieldDecorator('price', {
              rules: [
                {
                  validator: async (rule, value, callback) => {
                    if (!value && (form.getFieldValue('foreignPrice') || form.getFieldValue('foreignPriceUnit'))) {
                      callback('当前价格(外币)存在时，此项不能为空')
                      return false
                    } else if ( !form.getFieldValue('effectPrice') && !value ) {
                      callback('当前价格(元)与生效价格(元)不能同时为空')
                      return false
                    } else if (value && !/^[1-9]\d*$/.test(value)) {
                      callback("请输入正整数！");
                      return false
                    } else {
                      return true
                    }
                  }
                }
              ],
              initialValue: formData && formData.price
            })(<Input  placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={14}>
          <Col span={18}>
            <FormItem label="当前价格(外币)" {...rightFormLayout}>
              {form.getFieldDecorator('foreignPrice', {
                rules: [
                  {
                    validator: async (rule, value, callback) => {
                      if (!value && (form.getFieldValue('foreignPriceUnit'))) {
                        callback('当前价格(外币)单位存在时，此项不能为空')
                        return false
                      } else if (value && !/^[1-9]\d*$/.test(value)) {
                        callback("请输入正整数！");
                        return false
                      } else {
                        return true
                      }
                    }
                  }
                ],
                initialValue: formData && formData.foreignPrice
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={1}>-</Col>
          <Col span={5}>
            <FormItem wrapperCol={{ span: 20 }}>
              {form.getFieldDecorator('foreignPriceUnit', {
                rules: [
                  {
                    validator: async (rule, value, callback) => {
                      if (!value && form.getFieldValue('foreignPrice')) {
                        callback('当前价格(外币)存在时，此项不能为空')
                        return false
                      } else if (value && !/^[A-Z]{3}$/.test(value)) {
                        callback("请输入三位大写字母！");
                        return false
                      } else {
                        return true
                      }
                    }
                  }
                ],
                initialValue: formData && formData.foreignPriceUnit
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Col>
      </Row>

      <Row>
        <Col span={10}>
          <FormItem label="生效价格(元)" {...leftFormLayout}>
            {form.getFieldDecorator('effectPrice', {
              rules: [
                
                {
                  validator: async (rule, value, callback) => {
                    if (!value && (form.getFieldValue('effectForeignPrice') || form.getFieldValue('effectForeignPriceUnit'))) {
                      callback('生效价格(外币)存在时，此项不能为空')
                      return false
                    } else if (!form.getFieldValue('price') && !value) {
                      callback('当前价格(元)与生效价格(元)不能同时为空')
                      return false
                    }  else if (value && !/^[1-9]\d*$/.test(value)) {
                      callback("请输入正整数！");
                      return false
                    } else if (!value && form.getFieldValue('effectTime')) {
                      callback('生效时间存在时，此项不能为空')
                    } else {
                      return true
                    }
                  }
                }
              ],
              initialValue: formData && formData.effectPrice
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={14}>
          <Col span={18}>
            <FormItem label="生效价格(外币)"{...rightFormLayout}>
              {form.getFieldDecorator('effectForeignPrice', {
                rules: [
                  {
                    validator: async (rule, value, callback) => {
                      if (!value && (form.getFieldValue('effectForeignPriceUnit'))) {
                        callback('生效价格(外币)单位存在时，此项不能为空')
                        return false
                      } else if (value && !/^[1-9]\d*$/.test(value)) {
                        callback("请输入正整数！");
                        return false
                      } else {
                        return true
                      }
                    }
                  }
                ],
                initialValue: formData && formData.effectForeignPrice
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={1}>-</Col>
          <Col span={5}>
            <FormItem wrapperCol={{ span: 20 }}>
              {form.getFieldDecorator('effectForeignPriceUnit', {
                rules: [
                  {
                    validator: async (rule, value, callback) => {
                      if (!value && form.getFieldValue('effectForeignPrice')) {
                        callback('生效价格(外币)存在时，此项不能为空')
                        return false
                      } else if (value && !/^[A-Z]{3}$/.test(value)) {
                        callback("请输入三位大写字母！");
                        return false
                      } else {
                        return true
                      }
                    }
                  }
                ],
                initialValue: formData && formData.effectForeignPriceUnit
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Col>
      </Row>
      
      <Row>
        <Col span={10}>
          <FormItem label="生效时间" {...leftFormLayout}>
            {form.getFieldDecorator('effectTime', {
                initialValue: formData && formData.effectTime ? moment(formData.effectTime) : '',
                rules: [
                  {
                    validator: async (rule, value, callback) => {
                      if (!value && form.getFieldValue('effectPrice')) {
                        callback('生效价格(元)存在时，此项不能为空')
                        return false
                      } else {
                        return true
                      }
                    }
                  }
                ]
              })(<DatePicker 
                  format='YYYY-MM-DD HH:mm:ss'
                  showTime
                />)}
          </FormItem>
        </Col>
        <Col span={14}>
          <FormItem label="状态" labelCol={{span: 9}} wrapperCol={{span: 15}}>
          {form.getFieldDecorator('status', {
            rules: [
              {
                required: true,
                message: '请选择状态！',
              },
            ],
            initialValue: formData && formData.status
          })(<Radio.Group >
            <Radio value='1'>启用</Radio>
            <Radio value='0'>停用</Radio>
          </Radio.Group>)}
          </FormItem>
        </Col>
      </Row>
    </Modal>
  );
};

export default Form.create()(CreateForm);
